<template>
  <a-layout>
    <a-layout-sider
      v-model:collapsed="collapsed"
      collapsible
      class="sider"
      :width="siderWidth"
      :min-width="200"
      :max-width="500"
    >
      <div class="logo" :class="{ 'collapsed': collapsed }">
        <span v-if="!collapsed">AgenticSeek</span>
        <span v-else class="logo-icon">A</span>
      </div>
      <div class="system-status" :class="{ 'collapsed': collapsed }">
        <system-status :collapsed="collapsed" />
      </div>
      <session-list :collapsed="collapsed" />
    </a-layout-sider>
    
    <!-- 可拖动的分割线 -->
    <div 
      v-if="!collapsed"
      class="resize-handle"
      @mousedown="startResize"
    ></div>
    
    <a-layout>
      <a-layout-header class="header">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      
      <chat-window />
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
import ChatWindow from '@/components/Chat/ChatWindow.vue'
import SystemStatus from '@/components/Status/SystemStatus.vue'
import SessionList from '@/components/Session/SessionList.vue'
import { useChatStore } from '@/stores/chat'

const chatStore = useChatStore()
const collapsed = ref(false)
const siderWidth = ref(280) // 默认宽度
const isResizing = ref(false)

// 开始拖动调整大小
const startResize = (e: MouseEvent) => {
  isResizing.value = true
  document.body.classList.add('resizing')
  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  e.preventDefault()
}

// 处理拖动
const handleResize = (e: MouseEvent) => {
  if (!isResizing.value) return
  
  const newWidth = e.clientX
  if (newWidth >= 200 && newWidth <= 500) {
    siderWidth.value = newWidth
  }
}

// 停止拖动
const stopResize = () => {
  isResizing.value = false
  document.body.classList.remove('resizing')
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
  
  // 保存宽度到localStorage
  localStorage.setItem('siderWidth', siderWidth.value.toString())
}

// 组件挂载时恢复保存的宽度并初始化数据
onMounted(async () => {
  const savedWidth = localStorage.getItem('siderWidth')
  if (savedWidth) {
    const width = parseInt(savedWidth)
    if (width >= 200 && width <= 500) {
      siderWidth.value = width
    }
  }
  
  // 页面刷新时重新初始化聊天数据
  try {
    await chatStore.initialize()
  } catch (error) {
    console.error('初始化聊天数据失败:', error)
  }
})

// 组件卸载时清理事件监听器
onUnmounted(() => {
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})
</script>

<style scoped>
.sider {
  height: 100vh;
  position: relative;
}

.logo {
  height: 32px;
  margin: 16px;
  color: white;
  font-size: 18px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}

.logo.collapsed {
  margin: 16px 8px;
  font-size: 20px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #1890ff, #52c41a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: white;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.header {
  padding: 0;
  background: #fff;
}

.trigger {
  padding: 0 24px;
  font-size: 18px;
  line-height: 64px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.system-status.collapsed {
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

.system-status.collapsed :deep(.ant-card) {
  display: none;
}

.system-status.collapsed :deep(.collapsed-status) {
  width: 100%;
  height: 100%;
}

/* 可拖动的分割线样式 */
.resize-handle {
  width: 4px;
  background-color: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 10;
  transition: background-color 0.2s;
}

.resize-handle:hover {
  background-color: #1890ff;
}

.resize-handle::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 0;
  bottom: 0;
  background-color: transparent;
}

.resize-handle:hover::before {
  background-color: rgba(24, 144, 255, 0.1);
}

/* 拖动时的样式 */
body.resizing {
  cursor: col-resize !important;
  user-select: none;
}

body.resizing * {
  cursor: col-resize !important;
  user-select: none;
}
</style>